<template>
  <div class="divBox">
    <el-card class="box-card">
      <div :style="$cssStyle.headLine">
        {{ this.$route.meta.title }}
      </div>

      <el-form inline>
        <el-form-item>
          <div style="display:flex; justify-content:space-between;">
            <el-button :loading="loading" type="primary"
              style="background-color: rgba(255, 195, 0, 1);border-color:rgba(255, 195, 0, 1);"
              @click="getTableList">新增费率</el-button>
          </div>
        </el-form-item>
      </el-form>

      <el-table ref="tableData" v-loading="loading" :data="listData.list" highlight-current-row
        :header-cell-style="{ background: 'rgba(255, 240, 214, 1)' }"
        :row-style="({ row, rowIndex }) => { return { background: 'rgba(255, 255, 255, 1)' } }">
        <el-table-column label="序号" type="index" width="50px"></el-table-column>
        <el-table-column label="承运商名称" prop="name" show-overflow-tooltip></el-table-column>
        <el-table-column label="按单收费 /元" prop="name" show-overflow-tooltip header-align="center" >
          <el-table-column label="使用中" prop="name" show-overflow-tooltip ></el-table-column>
          <el-table-column label="审核中" prop="name" show-overflow-tooltip></el-table-column>
        </el-table-column>
        <el-table-column label="按金额收费 %" prop="name" show-overflow-tooltip header-align="center">
          <el-table-column label="使用中" prop="name" show-overflow-tooltip ></el-table-column>
          <el-table-column label="审核中" prop="name" show-overflow-tooltip></el-table-column>
        </el-table-column>
        <el-table-column label="状态" prop="name" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" min-width="130" fixed="right">
          <template slot-scope="scope">
            <el-button size="small" type="text" @click="getTableList()">编辑</el-button>
            <el-button size="small" type="text" @click="getTableList()">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination :current-page="listPram.page" :page-sizes="constants.page.limit" :layout="constants.page.layout"
        :total="listData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </el-card>
  </div>
</template>

<script>
import * as roleApi from '@/api/role.js'
export default {
  name: "RateSetting",
  data() {
    return {
      //获取定义的常量
      constants: this.$constants,
      //表格数据
      listData: { list: [{ name: '静态页面' }] },
      //提交参数
      listPram: {
        keyWord: null,
        page: 1,
        limit: this.$constants.page.limit[0],
      },
      //多选
      menuList: [],
      loading: false,
    }
  },
  created() {
    //this.type = parseInt(this.$route.params.type);
    //this.listPram.type = parseInt(this.$route.params.type)
  },
  mounted() {
    this.getTableList()
  },
  methods: {
    //获取表格分页数据
    getTableList() {
      /*
      this.loading = true      
      roleApi.roleGetPageList(this.listPram).then(res => {
        this.listData = res.data
        this.loading = false
      }).catch((err) => {
        this.loading = false
        this.$message.error(err.msg)
      })
      */
    },
    //改变每页行数
    handleSizeChange(val) {
      this.listPram.limit = val
      this.getTableList(this.listPram)
    },
    //改变页数
    handleCurrentChange(val) {
      this.listPram.page = val
      this.getTableList(this.listPram)
    }
  }
}
</script>

<style scoped>

</style>
